<template>
    <div>
        <div>
            <div class="select">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <span slot="label"><i class="el-icon-date"style="color:#ffffff;"></i></span>
                    <el-tab-pane label="日报" name="first"></el-tab-pane>
                    <el-tab-pane label="月报" name="second"></el-tab-pane>
                    <el-tab-pane label="年报" name="third"></el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div>
            <span class="demonstration"style="color:#ffffff;">所属单位：</span>
            <el-select
                    class="addPosInput1"
                    size="small"
                    v-model="pos.name" placeholder="请选择 所属单位">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <span class="demonstration"style="color:#ffffff;">站点：</span>
            <el-select
                    class="addPosInput2"
                    size="small"
                    v-model="value" placeholder="请选择 站点">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <span class="demonstration"style="color:#ffffff;">楼层：</span>
                <el-select
                        class="addPosInput3"
                        size="small"
                        v-model="value" placeholder="请选择 楼层">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>

            <el-button size="small"icon="el-icon-checktype"type="primary">搜索</el-button>

        </div>

        <div>

            <div class="block">
                <span class="demonstration"></span>
                <el-date-picker
                        style="color:#ffffff;"
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>

                <el-button size="small" type="primary" icon="el-icon-download"></el-button>
            </div>

        </div>
        <div class="posManaMain">
            <el-table
                    border
                    :data="datamenu"
                    size="small"
                    height="250"
                    stripe
                    style="background-color:#182450;">
                <el-table-column
                        prop="id"
                        label="设备号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="线路地址"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="today"
                        label="当日用电（kw.h）"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="compare"
                        label="对比日用电（kw.h）"
                        width="200">
                </el-table-column>
                <el-table-column
                    prop="increase"
                    label="增加值"
                    width="200">
                </el-table-column>
                <el-table-column
                        prop="chain"
                        label="环比%"
                        width="400">
                </el-table-column>
            </el-table>
        </div>


        <div>
            <div class="page">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
            </div>
        </div>
    </div>
</template>



<script>
    export default {

        name: "dldb",
        data() {
            return {
                activeName: 'second',
                pos: {
                    name: ''
                },
                datamenu: [{id:'98cc4d3037be',
                            address:'朔城区鄯阳街3号如家快捷酒店',
                            }]
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
                initdatamenu()
                {
                    this.getRequest('/system/basic/pos/').then(resp => {
                        if (resp) {
                            this.datamenu = resp;
                        }
                    })
                }
            }
        }
    }
</script>

<style >
    .addPosInput1{
        width:300px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .addPosInput2{
        width:300px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .addPosInput3{
        width:300px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .posManaMain{
        margin-top: 20px;
    }
    .block{
        margin-top: 35px;
        margin-right: 10px;
    }
    .page{
        margin-left: 600px;
    }
    .el-table-column{
        color:#182450;
    }
</style>